<template>
	<view class="container">
		<!-- <uni-swipe-action>
		    混合用法
		    <uni-swipe-action-item :right-options="options">
		        <view><text>混合使用</text></view>
		    </uni-swipe-action-item>
		</uni-swipe-action> -->
		<view class="zx-list">
			<uni-swipe-action>
				<uni-swipe-action-item :right-options="options" v-for="(item,index) in colList" :key="index" @click="delcol(item.id)">
					<view class="zx-item">
						<view class="zx-item-l">
							<view class="zx-item-lText">
								<text>{{item.title}}</text>
							</view>
							<view class="zx-item-lshuju">
								<view class="zx-item-lshuju-c">
									<view class="zx-item-lshuju-cicon">
										<image src="../../static/ic_coll.png" mode="widthFix"></image>
									</view>
									<text class="zx-item-lshuju-cnum">{{item.collect_num}}</text>
								</view>
								<view class="zx-item-lshuju-c">
									<view class="zx-item-lshuju-cicon">
										<image src="../../static/ic_eye.png" mode="widthFix"></image>
									</view>
									<text class="zx-item-lshuju-cnum">{{item.view_num}}</text>
								</view>
							</view>
						</view>
						<view class="zx-item-r">
							<image :src="item.image" mode="widthFix"></image>
						</view>
					</view>
				</uni-swipe-action-item>
				
			</uni-swipe-action>
			
		</view>
	</view>
</template>

<script>
	import app from '../../App.vue'
	export default{
		data(){
		    return {
				page:1,
				colList:[],
				options:[
					{
						text: '删除',
						style: {
							backgroundColor: '#dd524d'
						}
					}
				]
		    }
		  },
		onShow() {
			this.getcolList()
		},
		  methods:{
		    delcol(id){
				console.log(id)
				let that = this,
				data = {
					article_id:id
				}
				app.post('api/article/collect',data).then(res=>{
					if(res.code == 1){
						uni.showToast({
							title:'删除成功',
							icon:'success',
							mark:true,
							success() {
								that.getcolList()
							}
						})
					}else if(res.code == 0){
						uni.showToast({
							title:res.msg,
							icon:'none',
							mark:true,
							
						})
					}else if(res.code == 401){
						uni.showToast({
							title:res.msg,
							icon:'none',
							mark:true,
							
						})
					}
				}).catch(err=>{
					uni.showToast({
						title:res.msg,
						icon:'none',
						mark:true,
						
					})
				})
		      // console.log('点击了'+(e.position === 'left' ? '左侧' : '右侧') + e.content.text + '按钮')
		    },
				// swipeChange(e,index){
				//   console.log('当前状态：'+ open +'，下标：' + index)
				// },
			getcolList(){
				let that = this,
				data = {
					page:that.page,
					per_page:5
				}
				app.post('api/article/collectList',data).then(res=>{
					if(res.code == 1){
						that.colList = res.data.data
					}else if(res.code == 401){
						uni.showToast({
							title:res.msg,
							icon:'none',
							mask:true
						})
					}
				})
			}
		  }
	}
</script>

<style>
	@import url("../../common/percoll.css");
</style>
